﻿<form class="form-inline" ng-submit="rank(cert)">
    <p style="text-align: right">
        <b>Select Your Job Vacancy :</b>

        <select ng-model="cert.vacancyId">
            <option ng-repeat="vacancy in vacancys" value="{{vacancy.vacancy_id}}">{{vacancy.vacancy_id}} - {{vacancy.vacancy_for}}
            </option>
        </select>
    </p>


    <fieldset>

        <!-- Form Name -->
        <legend>Ranking Criteria (Weights)</legend>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="recommandation">Recommendations (%)</label>
            <div class="controls">
                <input ng-model="cert.recommandation" id="recommandation" name="recommandation" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="experience">Experience (%)  </label>
            <div class="controls">
                <input ng-model="cert.experience" id="experience" name="experience" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="education">Education (%)</label>
            <div class="controls">
                <input ng-model="cert.education" id="education" name="education" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="eligibility">Eligibility (%)</label>
            <div class="controls">
                <input ng-model="cert.eligibility" id="eligibility" name="eligibility" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="location">Location (%)</label>
            <div class="controls">
                <input ng-model="cert.location" id="location" name="location" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="age">Age (%)</label>
            <div class="controls">
                <input ng-model="cert.age" id="age" name="age" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="certifications">Certifications (%)</label>
            <div class="controls">
                <input ng-model="cert.certifications" id="certifications" name="certifications" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="skills">Skills (%)</label>
            <div class="controls">
                <input ng-model="cert.skills" id="skills" name="skills" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="control-label" for="projects">Projects (%)</label>
            <div class="controls">
                <input ng-model="cert.projects" id="projects" name="projects" type="number" placeholder="" class="form-control input-mini" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Total (%)</label>
            <div class="controls">
                <b>{{cert.recommandation + cert.experience + cert.education + cert.eligibility + cert.location + cert.age + cert.certifications + cert.skills + cert.projects}}</b>
            </div>
        </div>
        <br />
        <br />

        <p ng-hide="cert.recommandation + cert.experience + cert.education + cert.eligibility + cert.location + cert.age + cert.certifications + cert.skills + cert.projects == 100" class="text-danger">Total weight must be 100%.</p>


        <div class="progress">
            <div class="progress-bar  {{cert.recommandation > 20 && 'progress-bar-success' || cert.recommandation > 15 && 'progress-bar-info' || cert.recommandation > 10 && 'progress-bar-warning' || 'progress-bar-danger'}}  progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.recommandation; }}%">
                <b><span>Recommandations ({{cert.recommandation}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.experience > 20 && 'progress-bar-success' || cert.experience > 15 && 'progress-bar-info' || cert.experience > 10 && 'progress-bar-warning' || 'progress-bar-danger'}} progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.experience; }}%">
                <b><span>Experience ({{cert.experience}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.education > 20 && 'progress-bar-success' || cert.education > 15 && 'progress-bar-info' || cert.education > 10 && 'progress-bar-warning' || 'progress-bar-danger'}} progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.education; }}%">
                <b><span>Education ({{cert.education}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.eligibility > 20 && 'progress-bar-success' || cert.eligibility > 15 && 'progress-bar-info' || cert.eligibility > 10 && 'progress-bar-warning' || 'progress-bar-danger'}} progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.eligibility; }}%">
                <b><span>Eligibility ({{cert.eligibility}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.location > 20 && 'progress-bar-success' || cert.location > 15 && 'progress-bar-info' || cert.location > 10 && 'progress-bar-warning' || 'progress-bar-danger'}} progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.location; }}%">
                <b><span>Location ({{cert.location}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.age > 20 && 'progress-bar-success' || cert.age > 15 && 'progress-bar-info' || cert.age > 10 && 'progress-bar-warning' || 'progress-bar-danger'}} progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.age; }}%">
                <b><span>Age ({{cert.age}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.certifications > 20 && 'progress-bar-success' || cert.certifications > 15 && 'progress-bar-info' || cert.certifications > 10 && 'progress-bar-warning' || 'progress-bar-danger'}} progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.certifications; }}%">
                <b><span>Certifications ({{cert.certifications}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.skills > 20 && 'progress-bar-success' || cert.skills > 15 && 'progress-bar-info' || cert.skills > 10 && 'progress-bar-warning' || 'progress-bar-danger'}} progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.skills; }}%">
                <b><span>Skills ({{cert.skills}}%)</span></b>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar {{cert.projects > 20 && 'progress-bar-success' || cert.projects > 15 && 'progress-bar-info' || cert.projects > 10 && 'progress-bar-warning' || 'progress-bar-danger'}}  progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{cert.projects; }}%">
                <b><span>Projects ({{cert.projects}}%)</span></b>
            </div>
        </div>



        <!-- Button -->
        <div class="form-group">
            <label class="control-label" for="rank"></label>
            <div class="controls">
                <button type="submit" id="rank" name="rank" class="btn btn-success" ng-disabled="cert.recommandation + cert.experience + cert.education + cert.eligibility + cert.location + cert.age + cert.certifications + cert.skills + cert.projects != 100">Rank Candidates</button>
            </div>
        </div>

    </fieldset>
</form>



<br />
<br />
<br />


<form ng-hide="!candidates.length">
    <h3>Applicant Rankings</h3>

    <div class="row">
        <table class="table table-condensed table-hover">
            <tr ng-hide="!candidates.length">
                <th>Rank</th>
                <th></th>
                <th>Applicant</th>
                <th>Current Position</th>
                <th>Score</th>
                <th>Qualify</th>
                <th></th>
            </tr>
            <tbody ng-repeat="candidate in candidates">
                <tr>
                    <td> <input type="checkbox" name="chb[]" value="{{candidate.email}}" />  #{{candidates.indexOf(candidate) + 1}}
                    <button data-toggle="collapse" data-target="#{{candidate.id}}" type="button" class="btn btn-success btn-circle accordion-toggle"><i class="glyphicon glyphicon-chevron-right"></i></button>
                    </td>
                    <td>
                        <img src="{{candidate.pictureURL}}" /></td>
                    <td>{{candidate.firstName}} {{candidate.lastName}}</td>
                    <td>{{candidate.headline}}</td>
                    <th>{{candidate.score | number : 2}}
                    </th>
                    <td>
                        <img src="{{candidate.eligible == true && '../img/Accept-icon.png' || '../img/Button-Close-icon.png'}}" />
                    </td>
                    <td><button class="btn  btn-primary" onclick="window.open('mailto:{{candidate.email}}');">Invite...</button></td>
                </tr>
                <tr>
                    <td style="padding: 0;" colspan="5">
                        <div class="accordian-body collapse" id="{{candidate.id}}">
                            <table class="table">
                                <tr>
                                    <th>Criteria</th>
                                    <th>Score</th>
                                </tr>
                                <tr>
                                    <td>Recommendations</td>
                                    <td>{{candidate.recommandationIndex}}</td>
                                </tr>

                                <tr>
                                    <td>Experience</td>
                                    <td>{{candidate.experienceIndex}}</td>
                                </tr>

                                <tr>
                                    <td>Education</td>
                                    <td>{{candidate.educationIndex}}</td>
                                </tr>
                                <tr>
                                    <td>Eligibility</td>
                                    <td>{{candidate.eligibleIndex}}</td>
                                </tr>
                                <tr>
                                    <td>Location</td>
                                    <td>{{candidate.locationIndex}}</td>
                                </tr>
                                <tr>
                                    <td>Age</td>
                                    <td>{{candidate.ageIndex}}</td>
                                </tr>
                                <tr>
                                    <td>Certifications</td>
                                    <td>{{candidate.certificationIndex}}</td>
                                </tr>
                                <tr>
                                    <td>Skills</td>
                                    <td>{{candidate.skillIndex}}</td>
                                </tr>
                                <tr>
                                    <td>Projects</td>
                                    <td>{{candidate.projectIndex}}</td>
                                </tr>
                                <tr>
                                    <th>Total:</th>
                                    <th>{{candidate.score | number : 2}}</th>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>


        <p style="text-align:right"><button type="button" class="btn btn-success" 
            onclick="var selchbox = []; var inpfields = this.form.getElementsByTagName('input');var nr_inpfields = inpfields.length;for (var i = 0; i < nr_inpfields; i++) { if (inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);} window.open('mailto:'+ selchbox +'');">Send Invitations...</button></p>
    </div>

</form>
